<template>
    <div
        class="box-group businessSystem-right-top"
        :style="{height:accountInfoHeight+'px'}"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <div class="content table_eltabs">
            <el-tabs v-model="activeName" type="card" class="el_tabs_top">
                <div class="el_tabs_right">
                    <el-button
                        class="btmstyle"
                        type="text"
                        size="small"
                        v-if="accountInfoHeight>165"
                        @click="handleClickHeight"
                        icon="el-icon-caret-top"
                    >向上折叠</el-button>
                    <el-button
                        class="btmstyle"
                        v-if="accountInfoHeight<290"
                        @click="handleClickAddHeight"
                        type="text"
                        size="small"
                        icon="el-icon-caret-bottom"
                    >向下展开</el-button>
                </div>

                <el-tab-pane
                    v-for="(item,index) in AccountionTYPE_INFO"
                    :label="item.label+'('+item.typeNum+')'"
                    :name="item.code"
                    :key="index"
                >
                    <el-table
                        :data="cardList_3601.filter((data) =>{return data.CATEGORY + '' === item.code})"
                        :style="{height:(accountInfoHeight - 45)+'px'}"
                        border
                        class="table_head heard-bg setbottomborder"
                        :stripe="true"
                        :default-sort="{prop:'CARDSTAT',order:'ascending'}"
                    >
                        <el-table-column label min-width="35" max-width="55">
                            <template slot-scope="scope">
                                <el-radio
                                    v-model="optionCardNum"
                                    @change="handerRadioCardnbr(scope.row)"
                                    :label="scope.row.CARDNBR.trim()"
                                >{{ "" }}</el-radio>
                            </template>
                        </el-table-column>
                        <el-table-column prop="optionCardNum" label="卡号" min-width="150">
                            <template slot-scope="scope">
                                <div
                                    class="text_a"
                                    @click="handlCardInfo(scope.$index, scope.row)"
                                >{{ scope.row.CARDNBR }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="有效期" min-width="70">
                            <template slot-scope="scope">{{ scope.row.EXPIRE | filterExpire }}</template>
                        </el-table-column>
                        <el-table-column label="卡标志" min-width="70">
                            <template slot-scope="scope">{{ scope.row.MAFLAG | filterMaflag }}</template>
                        </el-table-column>
                        <el-table-column label="卡状态" min-width="150" sortable prop="CARDSTAT">
                            <template slot-scope="scope">
                                {{
                                scope.row.CARDSTAT | filterCardstat(CardStatValue)
                                }}
                            </template>
                        </el-table-column>
                        <el-table-column label="发卡日期" min-width="98">
                            <template slot-scope="scope">{{ scope.row.OPENDATE | filterYYYYMMDD }}</template>
                        </el-table-column>
                        <el-table-column label="年费收取情况" min-width="120">
                            <template slot-scope="scope">
                                {{
                                scope.row.FEETYPE | filterFEETYPE(FEETYPE_Option)
                                }}
                            </template>
                        </el-table-column>
                        <el-table-column label="卡片产品" min-width="155">
                            <template
                                slot-scope="scope"
                            >{{ scope.row.PRODUCT | isfilterProduct(ProductValue) }}</template>
                        </el-table-column>
                        <!-- <el-table-column label="卡片凸字" min-width="150">
                                    <template slot-scope="scope">{{ scope.row.EMBNAME }}</template>
                        </el-table-column>-->
                        <el-table-column label="状态日期" min-width="98">
                            <template slot-scope="scope">{{ scope.row.CHGDY | filterYYYYMMDD}}</template>
                        </el-table-column>
                        <el-table-column prop="optionCardNum" label="操作" min-width="70">
                            <template slot-scope>
                                <el-button type="primary" size="small" @click="sendCard">发送短信</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>

        <!-- <div class="text_center">

        </div>-->
        <el-dialog
            v-drag
            :close-on-click-modal="false"
            title="卡详细信息"
            :visible.sync="dialogTableVisible"
            center
            :modal="false"
            :append-to-body="true"
            top="10vh"
        >
            <card-data-enquiry-item
                v-if="dialogTableVisible"
                :DicValue="DicValue"
                :cardDataList="cardDataList"
            ></card-data-enquiry-item>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" size="small" @click="dialogTableVisible = false">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
import CardDataEnquiryItem from '@/views/businessTransactions/queryServiceClass/childItem/CardDataEnquiryItem.vue';
import BoxGroupWrap from '@/components/boxgroupwrap/BoxGroupWrap.vue';
import {
    trimString, closePage, getDictMappingValue, getDictSelectList, getBusinessMenuId
} from '@/utils/Common';
import { isEmptyObject } from '@/utils/Object';

export default {
    name: 'accountInfo',
    props: {
        cardList: {
            type: Array,
        },
        CardnbrNumOption: {
            type: String,
        },
    },
    data() {
        return {
            formData: [],
            dialogTableVisible: false,
            handlerCardnbrNum: '', // 当前卡号 默认卡
            cardDataList: '', // 当前银行卡的详细信息
            cardnbrList: [], // 当前表格里的所有银行卡信息
            ProductValue: [], //
            CardStatValue: [], // CLOCD 卡状态字段值 多个
            // FEECODE_Option:[],
            DicValue: {
                CarrState: '',
                comMaflag: '',
                comLmtopt: '',
                ComCCYN: '',
                ComECYN: '',
                ComISSUESTS: '',
            }, // 字典里的值
            pageLoading: false, // 页面loading
            CATEGORY_Option: '',
            // isBtnVal:'true',//
            tableHeight: '',
            // 账户类别
            activeName: '',
            FEETYPE_Option: [],//年费代码
            accountInfoHeight: 225,//表格高度
            MenuId: '',

        };
    },
    components: {
        CardDataEnquiryItem, BoxGroupWrap,
    },
    filters: {
        filterMaflag: (value) => {
            if (`${value}` == '1') {
                return '主卡';
            }
            return '附卡';
        },
        isfilterProduct: (value, ProductValue) => {
            value = (`${value}`).trim();
            const strLength = value.length;
            if (strLength < 4) {
                for (let i = 0; 4 - strLength > i; i++) {
                    value = `0${value}`;
                }
            }
            for (let index = 0; index < ProductValue.length; index++) {
                const element = ProductValue[index];
                if (element.code === value) {
                    return element.label;
                }
            }
            return value;
        },
        filterCardstat: (value, CardStatValue) => {
            value = (`${value}`).trim();
            if (value === '') return '正常';
            for (let index = 0; index < CardStatValue.length; index++) {
                const element = CardStatValue[index];
                if (element.code === value) {
                    return element.label;
                }
            }
            return value;
        },
        filterExpire: (value) => {
            value = (`${value}`).trim();
            if (value === '0000') return value;
            if (value) {
                return moment(value, 'YYMM').format('YY-MM');
            }
            return '';
        },
        filterYYYYMMDD: (value) => {
            value = (`${value}`).trim();
            if (value === '00000000') return '';
            if (value) {
                return moment(value, 'YYYYMMDD').format('YYYY-MM-DD');
            }
            return '';
        },
        filterFEETYPE: (value, FEETYPE_Option) => {
            //   console.log(CATEGORY_Option);
            let newValue = '';
            value = (`${value}`).trim();
            if (FEETYPE_Option.length > 0) {
                FEETYPE_Option.forEach((item) => {
                    if (item.code === value) {
                        newValue = item.label;
                    }
                });
            }
            return newValue;
        },
    },
    computed: {
        ...mapGetters([
            'cardInfo_3004',
            'customerInfo_3002',
            'cardList_3601',
            'isUserInfoView',
            'visitedViewsItem',
            'defaultParams',
            'AccountionTYPE_INFO',//账户类型数据
            'globalVariable',
            'businessMenu',//业务菜单数据
        ]),
        // isbuttonVal() {
        //     if (this.isUserInfoView) {
        //         this.tableHeight = '60vh';
        //         return '缩放';
        //     }
        //     this.tableHeight = '145px';
        //     return '全屏';
        // },

        // 这块不要改 离线业务时 软电话进线修改默认卡
        optionCardNum: { // //选为默认卡
            get() {
                if (!isEmptyObject(this.cardInfo_3004)) {
                    //  有的是卡号进线 有的是证件号进线 
                    // 证件号进线 就是第一个卡 
                    // this.activeName = this.AccountionTYPE_INFO[0].code;
                    this.activeName = this.cardInfo_3004.CATEGORY + ''
                    return (`${this.cardInfo_3004.CARDNO}`).trim();
                }
                return '';
            },
            set(params) {
                return params;
            },
        },
    },
    mounted() {
        this.getconfigInfo();
        console.log('this.globalVariable.accountInfoHeight', this.globalVariable.accountInfoHeight);
        this.accountInfoHeight = this.globalVariable.accountInfoHeight;
        // this.handelWindow();
    },
    methods: {
        // 点击切换
        // handleClick(tab, event) {
        // console.log(tab, event);
        // },
        // 
        async getconfigInfo() {
            this.pageLoading = true;
            this.formData = JSON.parse(JSON.stringify(this.cardList_3601));

            // console.log(this.CATEGORY_Option);
            await this.getasyncFun();
            this.pageLoading = false;
        },
        // 向上折叠按钮
        handleClickHeight() {
            this.accountInfoHeight = this.accountInfoHeight - 150;
            // 高度 记录到缓存里 
            this.globalVariable.accountInfoHeight = this.accountInfoHeight;
            this.$store.commit('menu/UPDATE_GLOBAL_VARIABLE', this.globalVariable);
        },
        // 向下展开按钮
        handleClickAddHeight() {
            this.accountInfoHeight = this.accountInfoHeight + 150;
            // 高度 记录到缓存里 
            this.globalVariable.accountInfoHeight = this.accountInfoHeight;
            this.$store.commit('menu/UPDATE_GLOBAL_VARIABLE', this.globalVariable);
        },

        handelWindow() {
            const domLeft = document.getElementsByClassName('businessSystem-left');
            // const domrightTop = document.getElementsByClassName('table_head');
            // const domrightTopWarpe = document.getElementsByClassName('businessSystem-right-top');
            const domright = document.getElementsByClassName('businessSystem-right');
            // const domViewRight = document.getElementsByClassName('tage-view-item-top');
            // if(this.isUserInfoView){
            //   this.$store.commit('UPDATA_USER_INFO_VIEW','false');
            // }
            if (this.isUserInfoView) {
                domLeft[0].style.display = 'none';
                // domrightTopWarpe[0].style.height = '70vh';
                // domrightTop[0].style.display = 'none';
                // domright[0].style.width='100%';
                box.style.display = 'none';
            } else {
                domLeft[0].style.display = 'block';
                // domrightTop[0].style.height = '145px';
                // domrightTopWarpe[0].style.height = '195px';
                // domViewRight[0].style.display='block';
                // domright[0].style.width='76%';
                box.style.display = 'block';
                // this.isBtnVal ='true';
            }
        },
        // 设置当前卡 为默认卡
        handerRadioCardnbr(row) {
            // 换卡时 清空当前 打开的页面
            const val = (`${row.CARDNBR}`).trim();
            this.optionCardNum = val;

            this.$nextTick(() => {
                this.$emit('childHanderRadioCardnbr', val);
                if (this.visitedViewsItem.length > 1) {
                    this.$store.commit('tagsView/DEL_NUM_CACHED_VIEWS_ITEM');
                    this.$store.commit('tagsView/DEL_NUM_VISITED_VIEWS_ITEM');
                    this.$router.push({
                        path: '/businessSystem/defaultPageItem',
                    });
                }
            });
        },

        // 点击卡号显示卡信息，跳转到卡资料页面
        async handlCardInfo(index, row) {
            const cardIds = (`${row.CARDNBR}`).trim();
            // if (this.optionCardNum !== cardIds) {
            //     this.handerRadioCardnbr(row);
            // }
            // this.optionCardNum =
            // this.pageLoading =true;
            // await this.getCardDataEnquiry(row.CARDNBR);
            //await this.getasyncFun();
            // this.dialogTableVisible= true; //显示弹框
            this.MenuId = getBusinessMenuId('/businessSystem/cardDataEnquiry', this.businessMenu);
            console.log('this.MenuId____', this.MenuId);
            this.$router.push({ name: 'CardDataEnquiry', path: '/businessSystem/cardDataEnquiry', params: { cardIds: cardIds, id: this.MenuId } });
        },


        // 3004按卡号查询卡资料信息
        async getCardDataEnquiry(cardId) {
            let defaultParamsinfo = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParamsinfo.body.appHead.tranCode = '3004';
            defaultParamsinfo.body.appBody = {
                CARDNBR: cardId,
                CARDNO: cardId,
                PINFLAG: '0',
                PIN: '',
            }
            await this.$post.common.transPort(defaultParamsinfo).then((res) => {
                const cardData = JSON.parse(res.data.jsonRes);
                if (res.status === 200) {
                    if (cardData.sysHead.rspCd == '000000') {
                        this.cardDataList = cardData.body.appBody;
                    }
                } else {
                    this.$message.error(cardData.sysHead.rspMsg);
                }
            }, (err) => {
                console.log(err);
                this.$message.error(err || 'err');
            });
        },

        // 异步查询字段值
        async getasyncFun() {
            // const CARDSTATValues = (`${this.cardDataList.CARDSTAT}`).trim();
            // if (CARDSTATValues) {
            //     // 挂失代码
            //     this.DicValue.CarrState = await getDictMappingValue('CLOCD', CARDSTATValues, this);
            // } else {
            //     this.DicValue.CarrState = '正常';
            // }
            // // 主附卡
            // this.DicValue.comMaflag = await getDictMappingValue('MAFLAG', this.cardDataList.MAFLAG, this);

            // FEECODE 年费 情况
            this.FEETYPE_Option = await getDictSelectList('FEECODE', this);
            // PRODUCT 卡片产品
            this.ProductValue = await getDictSelectList('PRODUCT', this);
            // CLOCD 卡片状态
            this.CardStatValue = await getDictSelectList('CLOCD', this);
            // // this.DicValue.CarrState = `${this.DicValue.CarrState}/${this.DicValue.comMaflag}`;
            // // this.DicValue.CarrState = `${this.DicValue.CarrState}/${await getDictMappingValue('PINSTS', this.cardDataList.PINSTS, this)}`;
            // // 附卡额度设置方式
            // this.DicValue.comLmtopt = await getDictMappingValue('LMTOPT', this.cardDataList.LMTOPT, this);
            // // 卡资料查询-发卡状态
            // this.DicValue.ComISSUESTS = await getDictMappingValue('ISSUESTS', this.cardDataList.ISSUESTS, this);
            // // 卡资料查询-本外币网上交易开关
            // this.DicValue.ComCCYN = await getDictMappingValue('CCECYN', this.cardDataList.CCYN, this);
            // this.DicValue.ComECYN = await getDictMappingValue('CCECYN', this.cardDataList.ECYN, this);
            this.pageLoading = false;
        },
        // 发送短信
        sendCard() {

            let tempContent = "尊敬的客户：您曾致电查询信用卡卡号，现将卡号后8位是" + this.optionCardNum.substring(8, 16) + "提供给您，请注意查看。";
            this.$router.push({
                name: 'dynamicMessage',
                path: '/index/dynamicMessage',
                params: {
                    tempName: '',
                    tempContent,
                },
            });
        },

        // sendCard1() {

        //     console.log("cardIds:" + this.optionCardNum);
        //     let msgcontent = "尊敬的客户，您当前选择发送的卡号为：" + this.optionCardNum + '。';
        //     console.log("msgcontent:", msgcontent);
        //     const appBody = {
        //         IntfCd: '101002033032',//交易吗（系统编号+服务吗）
        //         SysId: '10100203',//系统编号
        //         TrsCd: '3032',//服务代码
        //         BrNo: '32010101',//机构号
        //         ImmedFlg: '1',//实时标志，1-实时，0-非实时
        //         BkgTm: '0',//预约时间，不预约发送，填0
        //         MblNum: this.customerInfo_3002.MOBILEPHONE,//手机号码
        //         ShrtMsgCntnt: msgcontent, // 短信内容
        //     };
        //     this.defaultParams.sysHead.busiName = '短信发送';
        //     const params = JSON.parse(JSON.stringify(this.defaultParams));
        //     params.body.appHead.tranCode = '3032';
        //     params.body.appBody = appBody;

        //     // 跑 3072 交易
        //     this.$post.common.esbtran(params).then((res) => {
        //         this.pageLoading = false;
        //         if (res.status === 200) { // 接口请求成功
        //             const result = JSON.parse(res.data.jsonRes);
        //             console.log(result, 'result -- 3032');
        //             if (result.sysHead.rspCd === '000000') {
        //                 this.$alert(
        //                     '短信发送成功',
        //                     '提示',
        //                     {
        //                         center: true,
        //                         customClass: 'success', type: 'success',
        //                     },
        //                 );

        //             } else {
        //                 const errorMsg = `错误代码：${result.sysHead.rspCd}, 错误信息：${result.sysHead.rspDesc}`;
        //                 this.$alert(errorMsg, result.sysHead.rspDesc, {
        //                     customClass: 'error', type: 'error',
        //                 });
        //             }
        //         } else {
        //             this.$message.error('请求失败');
        //         }
        //     });
        // },
    },
};
</script>
<style lang="scss">
.table_eltabs {
    .el-tabs__header {
        margin-bottom: 1px;
    }
    .el_tabs_top {
        .el-tabs__head .el-tabs__nav-wrap {
            position: relative;
        }
        .el-tabs__content {
            overflow: unset;
        }
    }
    .el_tabs_right {
        position: absolute;
        right: 90px;
        top: -33px;
    }
    .el-tabs__nav-wrap {
        .el-tabs__nav-scroll {
            .el-tabs__nav .el-tabs__item {
                line-height: 32px;
                padding: 0 20px;
                border: 1px solid #ccc;
                font-weight: bolder;
                font-size: 15px;
                &.is-active {
                    background-color: #fff;
                }
            }
        }
    }
}
.businessSystem-right-top {
    min-height: 80px;
    /* height: calc(100% - 36px); */
    .setbottomborder {
        overflow: hidden;
        overflow-y: auto;
        .cell {
            text-overflow: unset;
            text-align: center;
            padding: 0 5px;
        }
    }
}
</style>
<style lang="scss"  scoped>
.businessSystem-right-top {
    padding: 5px 10px !important;
    overflow: hidden;
    .box-group-wrap {
        margin-bottom: 0px;
        min-height: 115px;
    }
    .el-tabs__nav.is-top .el-tabs__item {
        font-weight: bold;
    }
    .box-group-wrap .content {
        padding: 0;
    }
    .btmstyle {
        margin-top: 3px;
        padding: 5px 17px 5px;
        border: 1px solid #409eff;
    }
    .table_head {
        // margin: 0 0 0 4px;
        width: 100%;
        // float: left;
    }
    .butSmell {
        float: right;
        padding: 5px;
        margin-right: 35px;
        border: 1px solid #409eff;
    }

    .content /deep/ .side-bar-scrollbar-wrap {
        max-height: 155px;
        min-height: 155px;
    }
    /deep/ .el-table td {
        padding: 5px 0;
    }
    /deep/ .el-table th {
        padding: 1px 0;
    }
}
</style>
